<template>
  <div class="home-container">
    <!-- 轮播图 -->
    <div class="banner-section">
      <el-carousel :interval="4000" type="card" height="400px">
        <el-carousel-item v-for="(item, index) in banners" :key="index">
          <img :src="item.image" :alt="item.title" class="banner-image">
          <div class="banner-content">
            <h2>{{ item.title }}</h2>
            <p>{{ item.description }}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 快捷入口 -->
    <div class="quick-access">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in quickLinks" :key="index">
          <el-card shadow="hover" @click.native="$router.push(item.path)" class="quick-link-card">
            <i :class="item.icon"></i>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 内容区域 -->
    <el-row :gutter="20" class="content-section">
      <!-- 最近比赛 -->
      <el-col :span="8">
        <el-card class="content-card">
          <div slot="header" class="card-header">
            <span>最近比赛</span>
            <el-button type="text" @click="$router.push('/matches')">查看更多</el-button>
          </div>
          <div v-for="match in recentMatches" :key="match.id" class="match-item" @click="$router.push(`/matches/${match.id}`)">
            <div class="match-teams">
              <img :src="`/api/file/get/${match.homeTeamLogo}`" class="team-logo">
              <span class="vs">VS</span>
              <img :src="`/api/file/get/${match.awayTeamLogo}`" class="team-logo">
            </div>
            <div class="match-info">
              <div class="match-time">{{ formatTime(match.matchTime) }}</div>
              <div class="match-venue">{{ match.venueName }}</div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最新帖子 -->
      <el-col :span="8">
        <el-card class="content-card">
          <div slot="header" class="card-header">
            <span>最新帖子</span>
            <el-button type="text" @click="$router.push('/forum')">查看更多</el-button>
          </div>
          <div v-for="post in recentPosts" :key="post.id" class="post-item" @click="$router.push(`/forum/post/${post.id}`)">
            <el-avatar :src="`/api/file/get/${post.userAvatar}`" size="small"></el-avatar>
            <div class="post-content">
              <div class="post-title">{{ post.title }}</div>
              <div class="post-meta">
                <span>{{ post.username }}</span>
                <span>{{ formatTime(post.createdAt) }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最新反馈 -->
      <el-col :span="8">
        <el-card class="content-card">
          <div slot="header" class="card-header">
            <span>最新反馈</span>
            <el-button type="text" @click="$router.push('/feedback')">查看更多</el-button>
          </div>
          <div v-for="feedback in recentFeedbacks" :key="feedback.id" class="feedback-item">
            <div class="feedback-content">{{ feedback.content }}</div>
            <div class="feedback-meta">
              <el-tag size="small" :type="getStatusType(feedback.status)">
                {{ getStatusText(feedback.status) }}
              </el-tag>
              <span>{{ formatTime(feedback.createdAt) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatTime } from '@/utils/time'
import request from '@/utils/request'

export default {
  name: 'Home',
  data() {
    return {
      banners: [
        {
          image: require('@/assets/1.jpg'),
          title: '激情赛场',
          description: '一起感受篮球的魅力'
        },
        {
          image: require('@/assets/2.jpg'),
          title: '精彩对决',
          description: '见证巅峰对决'
        },
        {
          image: require('@/assets/3.jpg'),
          title: '球迷盛会',
          description: '共享篮球盛宴'
        }
      ],
      quickLinks: [
        {
          icon: 'el-icon-tickets',
          title: '购票',
          desc: '在线购票 快捷方便',
          path: '/matches'
        },
        {
          icon: 'el-icon-chat-line-round',
          title: '论坛',
          desc: '球迷交流 分享观点',
          path: '/forum'
        },
        {
          icon: 'el-icon-document',
          title: '订单',
          desc: '订单管理 一目了然',
          path: '/orders'
        },
        {
          icon: 'el-icon-service',
          title: '反馈',
          desc: '意见反馈 为您解答',
          path: '/feedback'
        }
      ],
      recentMatches: [],
      recentPosts: [],
      recentFeedbacks: []
    }
  },
  created() {
    this.fetchRecentMatches()
    this.fetchRecentPosts()
    this.fetchRecentFeedbacks()
  },
  methods: {
    formatTime,
    async fetchRecentMatches() {
      try {
        const res = await request.get('/api/matches/recent')
        this.recentMatches = res.data
      } catch (error) {
        console.error('获取最近比赛失败', error)
      }
    },
    async fetchRecentPosts() {
      try {
        const res = await request.get('/api/forum/posts/recent')
        this.recentPosts = res.data
      } catch (error) {
        console.error('获取最新帖子失败', error)
      }
    },
    async fetchRecentFeedbacks() {
      try {
        const res = await request.get('/api/feedbacks/recent')
        this.recentFeedbacks = res.data
      } catch (error) {
        console.error('获取最新反馈失败', error)
      }
    },
    getStatusType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'REPLIED': 'success',
        'CLOSED': 'info'
      }
      return typeMap[status] || 'info'
    },
    getStatusText(status) {
      const textMap = {
        'PENDING': '待处理',
        'REPLIED': '已回复',
        'CLOSED': '已关闭'
      }
      return textMap[status] || status
    }
  }
}
</script>

<style scoped>
.home-container {
  padding: 20px;
}

/* 轮播图样式 */
.banner-section {
  margin-bottom: 40px;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
}

.banner-content h2 {
  margin: 0;
  font-size: 24px;
}

.banner-content p {
  margin: 10px 0 0;
  font-size: 16px;
}

/* 快捷入口样式 */
.quick-access {
  margin-bottom: 40px;
}

.quick-link-card {
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-link-card:hover {
  transform: translateY(-5px);
}

.quick-link-card i {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 10px;
}

.quick-link-card h3 {
  margin: 10px 0;
  font-size: 18px;
}

.quick-link-card p {
  color: #909399;
  font-size: 14px;
}

/* 内容卡片样式 */
.content-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 比赛项样式 */
.match-item {
  padding: 15px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
}

.match-item:last-child {
  border-bottom: none;
}

.match-teams {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.team-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.vs {
  margin: 0 20px;
  font-weight: bold;
  color: #303133;
}

.match-info {
  text-align: center;
}

.match-time {
  color: #303133;
  font-size: 14px;
}

.match-venue {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
}

/* 帖子项样式 */
.post-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
}

.post-item:last-child {
  border-bottom: none;
}

.post-content {
  margin-left: 10px;
  flex: 1;
}

.post-title {
  font-size: 14px;
  color: #303133;
  margin-bottom: 5px;
}

.post-meta {
  font-size: 12px;
  color: #909399;
}

.post-meta span {
  margin-right: 10px;
}

/* 反馈项样式 */
.feedback-item {
  padding: 15px;
  border-bottom: 1px solid #EBEEF5;
}

.feedback-item:last-child {
  border-bottom: none;
}

.feedback-content {
  font-size: 14px;
  color: #303133;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.feedback-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #909399;
}
</style> 